<template>
  <div class="tableList flex-column" :class="{ 'eleFull': isEleFull }">
    {{ this.sheetOptions }}
    <div class="flex-hd">
      <div class="mb10">
        <slot name="formList"></slot>
      </div>
      <div class="toolbarList mb10">
        <div class="left">
          <slot name="toolbarLeft">
            <slot name="toolbarLeftStart"></slot>
            <el-button type="info" size="mini" icon="el-icon-upload2" v-if="options.import"
              v-hasPermi="options.import.auth" @click="options.import.click">{{options.import.name || '导入' }}</el-button>
            <el-button type="warning" size="mini" icon="el-icon-download" v-if="options.export"
              v-hasPermi="options.export.auth" @click="options.export.click">{{options.export.name || '导出' }}</el-button>
            <el-button type="warning" plain size="mini" icon="el-icon-download" @click="onJson">导出Json</el-button>
            <slot name="toolbarLeftEnd"></slot>
          </slot>
        </div>
        <div class="right">
          <slot name="toolbarRight">
            <slot name="toolbarRightStart"></slot>
            <!-- <el-dropdown size="medium" trigger="click" :hide-on-click="false">
              <el-tooltip class="item" effect="dark" content="筛选列" placement="top">
                <el-button size="mini" circle icon="el-icon-s-grid" />
              </el-tooltip>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="item.isFilter" v-for="item in ganttOptions.config.columns" :key="item.name">
                  <label><el-checkbox v-model="item.visible" @change="onChangeField()">{{ item.label }}</el-checkbox></label>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
            <ScreenFull :isEleFull.sync="isEleFull" />
            <el-tooltip v-if="options.serch" class="item" effect="dark" :content="options.serch.show ? '隐藏搜索' : '显示搜索'" placement="top">
              <el-button size="mini" circle icon="el-icon-search" @click="options.serch.click" />
            </el-tooltip>
            <slot name="toolbarRightEnd"></slot>
          </slot>
        </div>
      </div>
    </div>
    <div class="flex-bd" :id="sheetOptions.container" v-loading="options.loading" :style="{ height: isEleFull ? null : sheetOptions.height }"></div>
  </div>
</template>
  
<script>
// (文档API) https://docs.dhtmlx.com/spreadsheet
import { Spreadsheet, i18n } from './spreadsheet.v504.js'
import './spreadsheet.v504.css'
import ScreenFull from '@/components/Common/ScreenFull'
export default {
  name: 'SheetList',
  components: {
    ScreenFull
  },
  props: ['options', 'sheetOptions'],
  data() {
    return {
      isEleFull: false,
      defaultOptions: {
        configs: {
          //multiSheets: false,                  // 禁止多个表
          toolbarBlocks: ['undo', 'colors', 'decoration', 'align'],                    //['undo', 'colors', 'decoration', 'align'], // 工具栏
          leftSplit: 0,                        // 固定左侧
          topSplit: 0,                         // 固定顶部
          dateFormat: "%Y/%M/%D",
          menu: false,                         // 隐藏菜单
          editLine: false,                      // 隐藏编辑栏
          readonly: false                      // 只读
        }
      },
      locale: {
        en: {
          // Menu
          "undo": "撤消",
          "redo": "重做",
          "textColor": "颜色",
          "backgroundColor": "背景色",
          "bold": "加粗",
          "italic": "斜体",
          "underline": "下划线",
          "strikethrough": "中划线",
          "halign": "水平对齐",
          "valign": "垂直对齐",
          "merge": "合并",
          "format": "格式",
          "lockCell": "锁定单元格",
          "unlockCell": "解锁单元格",
          "clear": "清除",
          "clearValue": "清除值",
          "clearStyles": "清除样式",
          "clearAll": "清除所有",
          "rows": "行",
          "sort": "排序",
          "addColumn": "添加列",
          "removeColumn": "删除列",
          "addRow": "添加行",
          "removeRow": "删除行",
          "columns": "列",
          "ascSort": "从小到大",
          "descSort": "从大到小"
        }
      },
      sheetInstance: null
    }
  },
  computed: {
  },
  mounted() {
    this.init()
  },
  watch: {
    'sheetOptions.data': {
      handler(newval, old) {
        if (this.sheetInstance != null) {
          this.sheetInstance.parse(this.sheetOptions.data)
        }
      },
      // immediate: true,
      // deep: true
    }
  },
  methods: {
    init() {
      i18n.setLocale("spreadsheet", this.locale["en"])
      for (let key in this.sheetOptions) {
        if (key === 'config') {
          for (let keys in this.sheetOptions.config) {
            this.defaultOptions.config[keys] = this.sheetOptions.config[keys]
          }
        } else {
          this.defaultOptions[key] = this.sheetOptions[key]
        }
      }
      this.sheetInstance = new Spreadsheet(this.defaultOptions.container, this.defaultOptions.configs)
    },
    onChangeField(){
      
    },
    onJson() {
      this.sheetInstance.export.json()
    },
  }
}
</script>

<style scoped lang="scss">
</style>
